<template>
  <el-row :gutter="10">
    <el-col :span="18">
      <div class="background-container">
        <div class="content-overlay">
          <el-tabs v-model="activeTab" type="border-card">
            <!-- 基本信息标签页 -->
            <el-tab-pane label="基本信息" name="basic" class="tab-with-background">
              <el-row :gutter="15">
                <el-col :span="6" v-for="info in infoList" :key="info.label">
                  <el-card class="info-card">
                    <div>
                      <el-icon><component :is="info.iconComponent" :size="info.iconSize" /></el-icon>
                      <p style="font-weight: bold;">{{ info.label }}</p>
                      <p class="info-content">{{ currentProject[info.field] || '暂无数据' }}</p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>

            <!-- 系统描述标签页 -->
            <el-tab-pane label="系统描述" name="systemDescription">
              <el-card class="descriptionfirst-card">
                <h3>项目描述</h3>
                <p>{{ currentProject.reportDescription || '暂无项目描述' }}</p>
              </el-card>
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-card class="description-card">
                    <div>
                      <el-table :data="tableData" style="width: 100%" row-key="subsystem" :row-style="rowStyle">
                        <el-table-column prop="subsystem" label="子系统" width="180" :formatter="formatSubsystem"></el-table-column>
                        <el-table-column prop="module" label="模块" width="180"></el-table-column>
                        <el-table-column prop="description" label="模块描述"></el-table-column>
                      </el-table>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>

            <!-- 项目数据标签页 -->
            <el-tab-pane label="项目数据" name="projectData">
              <el-collapse accordion>
                <el-collapse-item >
                  <template #title><el-icon><Coin /></el-icon> 工作量分配</template>
                  <el-table :data="contents" style="width: 100%">
                    <el-table-column prop="stage" label="阶段"></el-table-column>
                    <el-table-column prop="percentage" label="占比"></el-table-column>
                  </el-table>
                </el-collapse-item>
                <el-collapse-item>
                  <template #title><el-icon><Postcard /></el-icon> 功能点明细</template>
                  <el-table :data="functionalPointModules" style="width: 100%" :row-class-name="tableRowClassName">
                    <el-table-column prop="subsystemName" label="子系统名称" ></el-table-column>
                    <el-table-column prop="name" label="模块名称" ></el-table-column>
                    <el-table-column prop="functionType" label="功能类型" ></el-table-column>
                    <el-table-column prop="functionPointNum" label="功能点数" ></el-table-column>
                    <el-table-column prop="ufp" label="UFP" ></el-table-column>
                    <el-table-column prop="reuseLevel" label="重用程度"></el-table-column>
                    <el-table-column prop="description" label="描述" width="200"></el-table-column>
                  </el-table>
                </el-collapse-item>
                <el-collapse-item>
                  <template #title><el-icon><Place /></el-icon> 子系统</template>
                  <el-table :data="subsystems" style="width: 100%">
                    <el-table-column prop="name" label="子系统名称"></el-table-column>
                    <el-table-column prop="workload" label="工作量"></el-table-column>
                    <el-table-column prop="developerNum" label="开发人数"></el-table-column>
                    <el-table-column prop="expense" label="开发费用"></el-table-column>
                    <el-table-column prop="expenseRatio" label="费用占比"></el-table-column>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
          </el-tabs>
         
          <!-- 进度条 -->
          <el-progress :percentage="progressPercentage" :stroke-width="20" :color="customColors" style="margin-top: 20px;"></el-progress>
        </div>
      </div>
    </el-col>
    
    <el-col :span="6">
      <!-- 批注部分固定显示 -->
      <div class="annotations">
        <h3>批注</h3>
        <div class="annotation-content">
          <el-card shadow="hover" class="annotation-card" v-if="annotations">
            <div class="annotation-header">
              <span class="reviewer-name">{{ annotations.reviewer }}</span>
              <el-tag :type="annotations.status === '已完成' ? 'success' : 'warning'" size="small">
                {{ annotations.status }}
              </el-tag>
            </div>
            <div class="annotation-text">
              <p>{{ annotations.text }}</p>
            </div>
          </el-card>
          <div v-else>
            <p>暂无评论</p>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>

  <!-- 返回项目管理-->
  <el-button type="danger" @click="goBack" style="margin-top:0px;">返回报告管理</el-button>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElRow, ElCol, ElCard, ElTabs, ElTabPane, ElProgress, ElButton, ElIcon, ElTag, ElTable, ElTableColumn, ElCollapse, ElCollapseItem } from 'element-plus';
import ProjectReportManagementService from '../api/ProjectReportManagemnet';
import { Place, Postcard, Coin, OfficeBuilding, Location, Calendar, List, Check, Loading, Guide, Star, DataLine, Eleme } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();
const currentProject = ref<any>({});
const annotations = ref<ReportAnnotation | null>(null);
const subsystems = ref<SubSystem[]>([]);
const modules = ref<Module[]>([]);
const contents = ref<Content[]>([]);
const activeTab = ref<string>('basic');
const tableData = ref<TableItem[]>([]);
const functionalPointModules = ref<FunctionalPointModule[]>([]);

interface InfoItem {
  label: string;
  field: string;
  iconComponent: any;
  iconSize?: number;
}

// 定义批注接口
interface ReportAnnotation {
  id: number;
  annotationId: number;
  reportId: number;
  reviewer: string;
  text: string;
  status: string;
}

// 定义子系统接口
interface SubSystem {
  id: number;
  name: string;
  workload: string;
  developerNum: number;
  expense: number;
  expenseRatio: number;
}

// 定义模块接口
interface Module {
  id: number;
  subsystemId: number;
  name: string;
  functionType: string;
  functionPointNum: number;
  ufp: number;
  reuseLevel: string;
  description: string;
}

// 定义内容接口
interface Content {
  id: number;
  reportId: number;
  stage: string;
  percentage: number;
}

// 定义表格项接口
interface TableItem {
  subsystem: string;
  module: string;
  description: string;
}

// 新增的功能点模块接口
interface FunctionalPointModule {
  subsystemName: string;
  name: string;
  functionType: string;
  functionPointNum: number;
  ufp: number;
  reuseLevel: string;
  description: string;
}

const infoList: InfoItem[] = [
  { label: '项目名称', field: 'reportName', iconComponent: Star, iconSize: 32 },
  { label: '公司名称', field: 'companyName', iconComponent: OfficeBuilding, iconSize: 24 },
  { label: '公司所在地', field: 'companyLocation', iconComponent: Location, iconSize: 30 },
  { label: '评估日期', field: 'evaluateTime', iconComponent: Calendar, iconSize: 22 },
  { label: '软件开发类别', field: 'softwareType', iconComponent: Guide, iconSize: 26 },
  { label: '状态', field: 'status', iconComponent: Check, iconSize: 32 },
  { label: '所处阶段', field: 'factorStage', iconComponent: DataLine, iconSize: 26 },
  { label: '调整因子', field: 'factorNum', iconComponent: Eleme, iconSize: 32 }
];

const formatSubsystem = (row: TableItem) => {
  // 如果是该子系统的第一个模块，则显示子系统名称，否则显示空字符串
  return tableData.value.indexOf(row) === 0 || tableData.value[tableData.value.indexOf(row) - 1].subsystem !== row.subsystem
    ? row.subsystem
    : '';
};

const rowStyle = ({ row, rowIndex }: { row: TableItem, rowIndex: number }) => {
  // 如果是该子系统的第一个模块，应用不同的样式
  if (rowIndex === 0 || tableData.value[rowIndex - 1].subsystem !== row.subsystem) {
    return { backgroundColor: '#f0f9eb', fontWeight: 'bold' };
  }
  return {};
};

const fetchProjectDetails = async () => {
  const projectIdStr = route.params.projectId as string; // 确保 projectId 是字符串
  const projectId = parseInt(projectIdStr); // 将字符串转换为整数
  if (isNaN(projectId)) {
    console.error('Invalid project ID:', projectIdStr);
    return;
  }

  try {
    // 清空数据
    tableData.value = [];
    functionalPointModules.value = [];

    const projectResponse = await ProjectReportManagementService.getProjectReportById(projectId);
    currentProject.value = projectResponse.data;
    console.log('currentProject:', currentProject.value); // 添加日志输出

    // 批注
    const annotationResponse = await ProjectReportManagementService.getReportAnnotationByReportId(projectId);
    console.log('annotationResponse:', annotationResponse); // 添加日志输出

    if (annotationResponse && annotationResponse.data && Array.isArray(annotationResponse.data) && annotationResponse.data.length > 0) {
      annotations.value = annotationResponse.data[0];
    } else {
      annotations.value = null;
    }
    console.log('annotations.value:', annotations.value); // 添加日志输出

    // 内容
    const contentResponse = await ProjectReportManagementService.getReportContentByReportId(projectId);
    contents.value = contentResponse.data;
    console.log('内容', contents.value);

    // 子系统
    const subSystemResponse = await ProjectReportManagementService.getSubSystemsByReportId(projectId);
    subsystems.value = subSystemResponse.data;
    console.log('子系统', subsystems.value); // 添加日志输出

    // 模块
    for (const subSystem of subsystems.value) {
      const modulesResponse = await ProjectReportManagementService.getModuleBySubsystemId(subSystem.id);
      console.log(`modulesResponse for subSystemId ${subSystem.id}:`, modulesResponse); // 添加日志输出

      if (modulesResponse && modulesResponse.data && Array.isArray(modulesResponse.data)) {
        modulesResponse.data.forEach((module: Module) => {
          tableData.value.push({
            subsystem: subSystem.name,
            module: module.name,
            description: module.description
          });

          functionalPointModules.value.push({
            subsystemName: subSystem.name,
            name: module.name,
            functionType: module.functionType,
            functionPointNum: module.functionPointNum,
            ufp: module.ufp,
            reuseLevel: module.reuseLevel,
            description: module.description
          });
        });
      }
    }
  } catch (error) {
    console.error('没有获取报告或批注信息', error);
  }
};

onMounted(fetchProjectDetails);

const goBack = () => {
  router.push({ name: 'ReportManagement' });
};

const progressPercentage = computed(() => {
  return currentProject.value.progress ? parseFloat(currentProject.value.progress) : 0;
});

const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
];

const tableRowClassName = ({ row, rowIndex }: { row: FunctionalPointModule, rowIndex: number }) => {
  if (rowIndex === 0 || functionalPointModules.value[rowIndex - 1].subsystemName !== row.subsystemName) {
    return 'subsystem-row';
  }
  return '';
};
</script>

<style scoped>
.el-row {
  margin: 20px;
}

.background-container {
  position: relative;
  padding-bottom: 200px; /* 确保背景图片高度 */
}

.content-overlay {
  position: relative;
  z-index: 1; /* 确保内容在背景图片上方 */
  padding: 20px; /* 添加内边距 */
}

.tab-with-background {
  background-image: url('../picture/coverbackground.png'); /* 设置背景图片 */
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  padding: 20px; /* 添加内边距 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.info-card {
  width: 160px;
  height: 160px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 20px;
  background-color: rgba(136, 204, 255, 0.8); /* 半透明背景色 */
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  margin-bottom: 20px; /* 增加上下间距 */
}

.descriptionfirst-card {
  width: 800px;
  min-height: 100px;
  overflow-y: auto;
  padding: 20px;
  border-radius: 10px;
  background-color: #fffff9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px; /* 增加上下间距 */
}
.description-card {
  width: 800px;
  min-height: 200px;
  overflow-y: auto;
  padding: 20px;
  border-radius: 10px;
  background-color: #fffff9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px; /* 增加上下间距 */
}

.data-card {
  width: 800px;
  min-height: 200px;
  overflow-y: auto;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px; /* 增加上下间距 */
}


.info-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-icon {
  font-size: 30px;
  margin-bottom: 10px;
  color: #333;
}

.annotations {
  border: 1px solid #ccc;
  padding: 20px;
  height: calc(100vh - 100px);
  overflow: auto;
  border-radius: 10px;
  background-color: #fffdfd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.annotation-content {
  max-height: calc(100% - 50px);
  overflow-y: auto;
}

.annotation-card {
  background-color: #fff6f6;
  height: 600px;
  margin-bottom: 10px;
}

.annotation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.reviewer-name {
  font-weight: bold;
}

.annotation-text p {
  margin: 0;
}
</style>






